<script setup lang="ts">
import {reactive, ref} from "vue";
import XiaoLiuRen from "./XiaoLiuRen.vue";
import {getXiaoLiuRen} from "../../api/taoists"
import {ElMessage} from "element-plus";

const submitForm = reactive({
  qikeType: '',
  qikeTime: '',
  num1: '',
  num2: '',
  num3: ''
})


const dataInfo = reactive({
  resultData: {}
})

const onSubmit = () => {
  getXiaoLiuRen(submitForm).then((res) => {
    if (res.code === '0000') {
      dataInfo.resultData = JSON.parse(res.result)
    }
  }).catch(() => {
    ElMessage({type: 'info', message: '操作失败！！',})
  })
}

</script>

<template>
  <el-form ref="form" :model="submitForm" class="form-class">
    <el-form-item>
      <el-select v-model="submitForm.qikeType" placeholder="请选择起课方式">
        <el-option label="时间起课" value="1"></el-option>
        <el-option label="一数起课" value="2"></el-option>
        <el-option label="二数起课" value="3"></el-option>
        <el-option label="三数起课" value="4"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="submitForm.qikeType==='1'">
      <el-date-picker v-model="submitForm.qikeTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="起课时间"></el-date-picker>
    </el-form-item>
    <el-form-item v-if="submitForm.qikeType==='2' || submitForm.qikeType==='3' || submitForm.qikeType==='4'">
      <el-input v-model="submitForm.num1" placeholder="第一个数字"></el-input>
    </el-form-item>
    <el-form-item v-if=" submitForm.qikeType==='3' || submitForm.qikeType==='4'">
      <el-input v-model="submitForm.num2" placeholder="第二个数字"></el-input>
    </el-form-item>
    <el-form-item v-if="submitForm.qikeType==='4'">
      <el-input v-model="submitForm.num3" placeholder="第三个数字"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">起课</el-button>
    </el-form-item>
  </el-form>
  <XiaoLiuRen :resultData="dataInfo.resultData"></XiaoLiuRen>
</template>

<style scoped>
.form-class {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

</style>
